<template>
  <div class="app-container">
    <!-- 提示开始 -->
    <el-alert
      type="warning"
      description="前端页面中人气置顶显示排序值从高到低。相同的排序值不保证其排序顺序"
      show-icon
    >
    </el-alert>
    <!-- 提示结束 -->
    <!-- 添加按钮开始 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="handleAddBtn()"
        >添加人气置顶</el-button
      >
    </el-card>
    <!-- 添加按钮结束 -->
    <!-- 表格开始 -->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="hotList"
        element-loading-text="数据加载中"
        stripe
        style="width: 100%"
        border
      >
        <el-table-column prop="date" label="序号" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="albumName" label="专辑名字" align="center">
        </el-table-column>
        <el-table-column
          prop="cover"
          label="专辑封面"
          width="120"
          align="center"
        >
          <template slot-scope="scope"
            ><el-image
              style="height: 80px"
              :src="scope.row.cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="wallpaperAlbumTopRel.likeTop" label="排序值">
        </el-table-column>
        <el-table-column prop="wallpaperAlbumTopRel.gmtCreate" label="创建时间">
        </el-table-column>
        <el-table-column
          prop="wallpaperAlbumTopRel.gmtModified"
          label="修改时间"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              @click="handleEditBtn(scope.row)"
              style="margin-left: 10px"
              >修改</el-button
            >

            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeDataById(scope.row.wallpaperAlbumTopRel.id)"
              style="margin-left: 10px"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->

    <!-- 弹出框开始 -->
    <el-dialog
      title="专辑信息"
      :visible.sync="dialogFormVisible"
      @close="handleClose"
    >
      <el-card class="dialog-container" shadow="never">
        <el-form>
          <el-form-item label="专辑名称" :label-width="formLabelWidth">
            <el-select v-model="params.albumId" filterable placeholder="请选择">
              <el-option
                v-for="item in albumList"
                :key="item.id"
                :label="item.albumName"
                :value="item.id"
              >
                <span style="float: left">{{ item.albumName }}</span>
                <el-image style="float: right;width:40px;height:40px" :src="item.cover"></el-image>
                <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.id
                }}</span> -->

              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="排序值" :label-width="formLabelWidth">
            <el-input
              v-model="params.likeTop"
              placeholder="数值越小越靠前"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出框结束 -->
  </div>
</template>

<script>
import tophot from "@/api/tophot";
import album from "@/api/album";
import singleUpload from "@/components/Upload/singleUpload";
export default {
  components: {
    singleUpload,
  },
  data() {
    return {
      page: 1,
      loading: true,
      hotList: [],
      albumList: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      params: {
        id: "",
        albumId: "",
        likeTop: "",
      },
    };
  },
  created() {
    this.getAllLike();
  },
  methods: {
    //获得所有最热置顶
    getAllLike() {
      tophot.getLike().then((res) => {
        console.log(res);
        this.hotList = res.data.result;
        this.loading = false;
        console.log(this.hotList);
      });
    },

    //获得所有专辑
    getAllAlbum() {
      album.getAllAlbum().then((res) => {
        this.albumList = res.data.result;
      });
    },

    //添加最热置顶事件
    handleAddBtn() {
      this.getAllAlbum();
      this.dialogFormVisible = true;
    },

    //修改最热置顶
    handleEditBtn(row) {
      this.getAllAlbum();
      console.log(this.albumList);

      this.params.id = row.wallpaperAlbumTopRel.id;
      this.params.albumId = row.id;
      this.params.likeTop = row.wallpaperAlbumTopRel.likeTop;

      console.log(this.params);

      this.dialogFormVisible = true; 
    },
    //删除最热置顶
    removeDataById(id) {
      this.$confirm("确定删轮播图?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          tophot.deleteTopById(id).then((res) => {
            this.$message.success("删除成功");
            this.getAllLike();
          });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },

    //弹出框关闭回调
    handleClose() {
      //console.log("触发了关闭回调")
      this.params = {};
      this.dialogFormVisible = false;
    },

    //弹出框确定按钮事件
    handleConfirm() {
      if (this.params.id == null || this.params.id == "") {
        //console.log("执行了添加方法")
        tophot.addTop(this.params).then((res) => {
          this.$message.success("添加成功");
          this.getAllLike();
          this.dialogFormVisible = false;
        });
      } else {
        tophot.updataTop(this.params).then((res) => {
          // console.log("执行了更新方法")
          this.$message.success("更新成功");
          this.getAllLike();
          this.dialogFormVisible = false;
        });
      }
    },
  },
};
</script>